<template>
  <van-tabs
    v-model:active="active"
    @change="onTabChange"
    sticky
    swipeable
    class="custom-tabs"
  >
    <van-tab title="考卷信息" :badge="store.getters.paperCount || ''">
      <div class="router-view-container">
        <router-view v-if="currentTab === 'info'"></router-view>
      </div>
    </van-tab>
    <van-tab title="我的试卷">
      <div class="router-view-container">
        <router-view v-if="currentTab === 'myexams'"></router-view>
      </div>
    </van-tab>
    <van-tab title="成绩分析">
      <div class="router-view-container">
        <router-view v-if="currentTab === 'analysis'"></router-view>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script setup>
import { ref, computed } from "vue";
import { Tab as VanTab, Tabs as VanTabs } from "vant";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();
const route = useRoute();
const active = ref(0);
const tabRoutes = ["info", "myexams", "analysis"];

// Set initial tab based on current route
const initRoute = () => {
  const path = route.path;
  if (path.includes("myexams")) {
    active.value = 1;
  } else if (path.includes("analysis")) {
    active.value = 2;
  } else {
    active.value = 0;
  }
};

// Compute current tab name
const currentTab = computed(() => tabRoutes[active.value]);

// Handle tab change
const onTabChange = (index) => {
  const tabName = tabRoutes[index];
  router.push(`/test/${tabName}`);
};

// Initialize active tab based on current route
initRoute();
</script>

<style scoped>
.custom-tabs {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.custom-tabs :deep(.van-tabs__wrap) {
  padding: 0 8px;
}

.custom-tabs :deep(.van-tab) {
  transition: all 0.3s ease;
  font-size: 14px;
  color: #666;
}

.custom-tabs :deep(.van-tab--active) {
  font-weight: 600;
  color: var(--van-primary-color);
  transform: scale(1.05);
}

.custom-tabs :deep(.van-tabs__line) {
  height: 3px;
  border-radius: 2px;
  width: 24px !important;
  background: var(--van-primary-color);
  transition: all 0.3s ease;
}

.router-view-container {
  padding: 14px;
}
</style>
